{% extends "element/saas/base_mini.html" %}
{% load future wenlincms_tags staticfiles wlcore_tags report_tags %}

{% block meta_title %}消费和充值记录{% endblock %}

{% block main %}
    <div class="admin-content">
        <div class="am-g" id="saas_ucenter">
            <div class="am-u-sm-12" style="padding-right: 22px">
                <div data-am-widget="tabs" class="am-tabs am-tabs-default" data-am-tabs="{noSwipe: 1}">

                    <h4 class="secondtitle">消费与充值详情</h4>

                    <ul class="am-tabs-nav am-cf" id="ucenterTab">
                        <li {% if fpage_total %}class="am-active"{% endif %}><a
                                href="[data-tab-panel-0]">消费记录</a></li>
                        <li class=""><a href="[data-tab-panel-1]">充值记录</a></li>
                    </ul>
                    <div class="am-g searchdate">
                        <div style="position: absolute;right: 10px;top: -35px;color: #999;">
                            注：消费记录只显示近三个月
                        </div>
                        <div class="am-u-sm-3">
                            <input type="text" class="am-form-field" id="startdate"
                                   data-am-datepicker/>
                        </div>
                        <div class="am-u-sm-1">—</div>
                        <div class="am-u-sm-3">
                            <input type="text" class="am-form-field" id="enddate" data-am-datepicker/>
                        </div>
                        <div class="am-u-sm-2">
                            <button type="button" class="am-btn am-btn-default am-btn-xs" id="datechange">筛选</button>
                        </div>
                        <div class="am-u-sm-2">
                            <button type="button" class="am-btn am-btn-default am-btn-xs" id="dateclear">清除</button>
                        </div>
                    </div>
                    <div class="am-tabs-bd">
                        <div data-tab-panel-0 class="am-tab-panel am-active">

                            <table class="am-table am-table-radius am-table-striped">
                                <thead>
                                <tr>
                                    <th width="150" style="padding-left: 15px;">消费时间</th>
                                    <th width="150">消费项</th>
                                    <th width="100">消费数量</th>
                                    <th width="100">消费金额</th>
                                    <th width="300">相关类目</th>
                                </tr>
                                </thead>

                                <tbody id="re_comlistF">
                                {% for f_log in fee_log %}
                                    <tr>
                                        <td class="uctime">{{ f_log.created }}</td>
                                        <td>{{ f_log.get_item_display }}</td>
                                        <td>{{ f_log.count|elweizhi }}</td>
                                        <td>￥{{ f_log.fee }}</td>
                                        <td>{{ f_log.tkey_des|safe }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

                            <ul data-am-widget="pagination" class="am-pagination am-pagination-default saas_pagination"
                                id="re_paginationF">
                                <li class="am-pagination-prev preBtn">
                                    <a href="javascript:void(0)">上一页</a>
                                </li>
                                <li class="am-pagination-next nextBtn">
                                    <a href="javascript:void(0)">下一页</a>
                                </li>
                                <li class="jumpPage">
                                    <div class="inBox">
                                        跳转 <input class="mini-textbox" vtype="int" name="numinput1"
                                                  width="60" height="30"/>&nbsp;&nbsp;/<em class="numBox">-</em>页
                                    </div>
                                    <em class="jumpbtn" style="padding: 1px 10px">确定</em>
                                </li>
                            </ul>
                        </div>

                        <div data-tab-panel-1 class="am-tab-panel ">
                            <table class="am-table am-table-radius am-table-striped">
                                <thead>
                                <tr>
                                    <th width="100" style="padding-left: 15px;">充值时间</th>
                                    <th width="100">充值方式</th>
                                    <th width="100">充值金额</th>
                                    <th width="100">状态</th>
                                </tr>
                                </thead>

                                <tbody id="re_comlistC">
                                {% for c_log in charge_log %}
                                    <tr>
                                        <td class="uctime">{{ c_log.created }}</td>
                                        <td>-</td>
                                        <td>￥{{ c_log.money }}</td>
                                        <td>成功</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

                            <ul data-am-widget="pagination" class="am-pagination am-pagination-default saas_pagination"
                                id="re_paginationC">
                                <li class="am-pagination-prev preBtn">
                                    <a href="javascript:void(0)">上一页</a>
                                </li>
                                <li class="am-pagination-next nextBtn">
                                    <a href="javascript:void(0)">下一页</a>
                                </li>
                                <li class="jumpPage">
                                    <div class="inBox">
                                        跳转 <input class="mini-textbox" vtype="int" name="numinput2"
                                                  width="60" height="30"/>&nbsp;&nbsp;/<em class="numBox">-</em>页
                                    </div>
                                    <em class="jumpbtn">确定</em>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_js %}
    {{ block.super }}
    <script>
        {#    禁止选择当前日期之后的日期#}
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var startdate = $('#startdate');
        var enddate = $('#enddate');
        var checkin = function (datepicker) {
            datepicker.datepicker({
                onRender: function (date, viewMode) {
                    // 默认 days 视图，与当前日期比较
                    var viewDate = nowDay;

                    switch (viewMode) {
                        // moths 视图，与当前月份比较
                        case 1:
                            viewDate = nowMoth;
                            break;
                        // years 视图，与当前年份比较
                        case 2:
                            viewDate = nowYear;
                            break;
                    }
                    return date.valueOf() > viewDate ? 'am-disabled' : '';
                }
            }).data('amui.datepicker');
        };
        checkin(startdate);
        checkin(enddate);
        {#一系列变量 获取参数#}
        var CNum, FNum, sdate, plists;
        //搜索结果页跳转报告
        var stdate = "", eddate = "",
            fpage_total = {{ fpage_total }},
            cpage_total = {{ cpage_total }},
            datavalue = getQueryString("sdate");
        FNum = getQueryString("fpage");
        CNum = getQueryString("cpage");
        if (datavalue) {
            var splitindex = datavalue.indexOf("￥");
            stdate = datavalue.substring(0, splitindex);
            eddate = datavalue.substring(splitindex + 1, datavalue.length);
        }
        startdate.attr('value', stdate);
        enddate.attr('value', eddate);
        {#消费#}
        var getListF = function (num) {
            var pageallNum = Math.ceil(fpage_total / 20);
            $("#re_paginationF .numBox").text(fpage_total);
            pageTool(pageallNum, num, "re_paginationF");
            clearcli();
        };
        {#充值#}
        var getListC = function (num) {
            var pageallNum = Math.ceil(cpage_total / 20);
            $("#re_paginationC .numBox").text(cpage_total);
            pageTool(pageallNum, num, "re_paginationC");
            clearcli();
        };
        {#        移除添加click#}
        function clearcli() {
            $(".pageli").attr("onclick", "selectpage(this)");
            $(".preBtn").removeAttr("onclick");
            $(".nextBtn").removeAttr("onclick");
        }
        {#                初始化充值消费#}
        if (!FNum) {
            FNum = 1;
        }
        if (!CNum) {
            CNum = 1;
        } else {
            $('#ucenterTab').tabs('open', 1)
        }
        getListF(FNum - 1);
        plists = $("#re_paginationF .pageli");
        addPageAc(FNum);
        getListC(CNum - 1);
        plists = $("#re_paginationC .pageli");
        addPageAc(CNum);
        {#        跳转页面#}
        $("#re_paginationC .jumpbtn").click(function () {
            var n = jumpage(CNum, getListC, "numinput2");
            if (n >= 0) {
                CNum = parseFloat(n) + 1;
                location.href = "/saas/account_charge/?cpage=" + CNum
            }
        });
        $("#re_paginationF .jumpbtn").click(function () {
            var m = jumpage(FNum, getListF, "numinput1");
            if (m >= 0) {
                FNum = parseFloat(m) + 1;
                location.href = "/saas/account_charge/?fpage=" + FNum
            }
        });
        $("#datechange").click(function () {
            jumpurl();
        });
        {#        筛选时间#}
        $("#dateclear").click(function () {
            startdate.attr("value", "");
            enddate.attr("value", "");
            jumpurl();
        });
        {#        翻页#}
        $("#re_paginationC .nextBtn").click(function () {
            CNum++;
            jumpurl(CNum);
        });
        $("#re_paginationF .nextBtn").click(function () {
            FNum++;
            jumpurl(FNum);
        });
        $("#re_paginationC .preBtn").click(function () {
            CNum--;
            jumpurl(CNum);
        });
        $("#re_paginationF .preBtn").click(function () {
            FNum--;
            jumpurl(FNum);
        });
        {#        获取筛选的时间#}
        function getdate() {
            var startVal = startdate.attr("value");
            var endVal = enddate.attr("value");
            if (startVal == undefined) {
                startVal = "";
            }
            if (endVal == undefined) {
                endVal = "";
            }
            sdate = startVal + "￥" + endVal;
        }
        {#        跳转url#}
        function jumpurl(page) {
            getdate();
            if (!page) {
                page = 1;
            }
            var text = $("#ucenterTab .am-active a").text();
            if (text == "消费记录") {
                location.href = "/saas/account_charge/?sdate=" + sdate + "&fpage=" + page;
            } else {
                location.href = "/saas/account_charge/?sdate=" + sdate + "&cpage=" + page;
            }
        }
        {#        active#}
        function addPageAc(num) {
            plists.each(function () {
                var _this = $(this);
                _this.removeClass("am-active");
                var _thisname = _this.attr("name");
                if (_thisname == num) {
                    _this.addClass("am-active");
                }
            })
        }
        {#        点击页码跳转#}
        function selectpage(_this) {
            var $this = $(_this);
            var _thisname = $this.attr("name");
            jumpurl(_thisname);
        }
    </script>
{% endblock %}
